<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>打印</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="/qrcode/qrcode.js"></script>
    <script src="/qrcode/jquery-3.5.1.js"></script>
    <script src="/qrcode/jQuery.print.js"></script>
    <link rel="stylesheet" href="/component/layui/css/layui.css">
    <style>
        @page {
            /*width: 40mm; !* 设置打印页面的宽度为210mm *!*/
            /*height: 30mm; !* 设置打印页面的高度为297mm *!*/
            margin: 1mm; /* this affects the margin in the printer settings */
        }

        .layui-btn {
            width: 50%;
            height: 50px;
            font-size: 22px;
        }

        .archiveInfo {
            margin-top: 5px;
        }
    </style>
    <script>
        function printThis() {
            //print打印时去掉页眉和页脚
            $("#print-content").print({
                globalStyles: true,//是否包含父文档的样式，默认为true
                mediaPrint: false,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
                noPrintSelector: ".avoid-this",//不想打印的元素的jQuery选择器，默认为".no-print"
                deferred: $.Deferred().done(function () {
                    // 打印完成后关闭弹窗
                    parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                }),

            });
            // $("#print-content").print({
            //     globalStyles: true,
            //     mediaPrint: false,
            //     noPrintSelector: ".avoid-this",
            //     // 打印前回调：临时显示容器，确保插件能获取打印内容
            //     beforePrint: function() {
            //         $("#print-content").css("display", "block");
            //     },
            //     // 打印后回调：关闭弹窗+重新隐藏容器（防止后续页面异常）
            //     deferred: $.Deferred().done(function () {
            //         parent.layer.close(parent.layer.getFrameIndex(window.name));
            //         $("#print-content").css("display", "none");
            //     }),
            // });
        }
    </script>
</head>
<body>
<div></div>
<div style="margin-bottom: 35px"></div>
<div id="print-content" style="display: flex;
    align-items: center;flex-direction: column;">
    <div id="code" style="margin-top: 8px"></div>
    <div style="display: flex;;margin-top: 5px">
        <div style="font-size: 10px" th:text="${fileName}"></div>
        <div style="font-size: 10px;margin-left: 15px;" th:text="${date}"></div>
    </div>
</div>
<div class="layui-row" style="display: flex;align-items: center;flex-direction: column;margin-top: 40px;">
    <button type="button" class="layui-btn" id="print-btn" onclick="printThis()">打印</button>
</div>
<script src="/component/layui/layui.js"></script>
<script th:inline="javascript">
    var uuid = [[${uuid}]];
    var qrcode = new QRCode(document.getElementById("code"), {
        text: "ZXKJ:" + uuid,
        width: 80,
        height: 80,
        // colorDark : "#f60",
        // colorLight : "#ccc",
        correctLevel: 0 // 二维码结构复杂性 0~3
    });

    $(document).ready(function () {
        printThis()
    });



</script>
</body>
</html>